<template>
	<view>
		<view class="tabNav">
			<view class="tabItem"
				:class="[orderStaIndex == index ? 'active' : '']"
				v-for="(item,index) in orderStaArr"
				:key="index"
				@tap="switchStatus(index,item.id)"
			>{{item.name}}<view class="lineView"></view></view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				orderStaArr:[
					{id:'-1',name:'全部'},
					{id:'0',name:'待支付'},
					{id:'1',name:'待咨询'},
					{id:'6',name:'已完成'},
					{id:'7',name:'已取消'}
				],
				orderStaIndex : 0,
			}
		},
		methods:{
			switchStatus(index,id){
				this.orderStaIndex = index;
				this.$emit('switchStatus',id)
			}
		}
	}
</script>

<style lang='scss' scoped>
	.tabNav{
		width: 100%;
		height: 90rpx;
		background: #fff;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 100;
		display: flex;
		/* box-shadow: 0 5rpx 8rpx rgba(0,0,0,.05); */
		.tabItem{
			width: 20%;
			height: 90rpx;
			line-height: 90rpx;
			font-size: 30rpx;
			color:$pss-text-color8 ;
			text-align: center;
			position: relative;
			.lineView{
				width: 30%;
				height: 10rpx;
				background:$pss-color-primary_1;
				position: absolute;
				left: 35%; 
				bottom: 10rpx;
				display: none;
				border-radius: 20rpx;
			}
			&.active{
				color: $pss-color-primary_1;
				font-weight: bold;
				font-size: $font-size32;
				.lineView{
					display: block;
				}
			}
		}
	}
</style>